<template>
  <div>
    <el-form labelWidth="120px" :disabled="status==1">
      <el-form-item :label="timename" style="margin-bottom:5px" class="is-required">
        <el-row style="border:1px solid #f1f1f1;padding:10px;" v-for="(item, index) in timearr" :key="index">
          <el-col :span="22">
            <el-date-picker
              style="width:70%"
              v-model="item.starttime"
              type="date"
              :pickerOptions="pickerOptions1"
              valueFormat="yyyy-MM-dd"
              placeholder="选择开始日期"
            >
            </el-date-picker>
            <el-select v-model="item.startinterval" placeholder="请选择开始时段" style="width:30%;" :disabled="item.starttime==''"
              @change="changeendinterval($event,index)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-date-picker

              v-model="item.endtime"
              style="width:70%"
              type="date"
              @change="changeendtime($event,index)"
              :pickerOptions="pickerOptions2"
              placeholder="选择结束日期"
              valueFormat="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-select v-model="item.endinterval" placeholder="请选择结束时段" style="width:30%;" @change="changeendinterval($event,index)"
              :disabled="item.endtime==''"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p style="line-height:30px;height:30px">时长（天）：{{gettimelen(item.starttime,item.startinterval,item.endtime,item.endinterval)}}</p>
          </el-col>
          <el-col :span="2" v-if="status!=1">
            <i class="el-icon-delete deleteicon" @click="deletetime(index)"></i>
          </el-col>
        </el-row>

      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" style="width:100%" @click="addtime">添加时长</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default{
  props: {
    lasttimearr: Array,
    timename: String,
    status: Number,
  },
  watch: {
    timearr: {
      handler(newValue) {
        for (let i = 0; i < newValue.length; i += 1) {
          newValue[i].timelen = this.gettimelen(newValue[i].starttime, newValue[i].startinterval, newValue[i].endtime, newValue[i].endinterval);
        }
        this.$emit('update:lasttimearr', newValue);
        console.log(newValue,'newvalue')
      },
      deep: true,
    },
  },
  created() {
    if (this.status != 0) {
      this.timearr = this.lasttimearr;
    }
  },
  data() {
    return {
      leaveData: {},
      timearr: [{
        starttime: '',
        endtime: '',
        startinterval: '',
        endinterval: '',
        timelen: '',
      }],
      options: [{
        value: '1',
        label: '上午',
      }, {
        value: '2',
        label: '下午',
      }],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  methods: {
    changeendinterval(val, index) {
      console.log(val, index);
      const a = this.timearr[index].starttime;
      const a1 = this.timearr[index].startinterval;
      const b = this.timearr[index].endtime;
      const b1 = this.timearr[index].endinterval;
      if (a == b) {
        if (a1 == '2' && b1 == '1') {
          this.$message({
            type: 'error',
            message: '时间段冲突，请重新选择!',
          });
          this.timearr[index].endinterval = '';
        }
      }
    },
    changeendtime(val, index) {
      console.log(val, index);
      const a = this.timearr[index].starttime;
      const b = val;
      if (a > b) {
        this.$message({
          type: 'error',
          message: '结束日期不能小于开始日期!',
        });
        this.timearr[index].endtime = '';
      }
      // console.log(a < b);
    },
    gettimelen(a, a1, b, b1) {
      if (a == '' || a1 == '' || b == '' || b1 == '') {
        return '';
      }
      const datedif = this.datedifference(a, b);
      const timedif = (b1 - a1) / 2 + 0.5;
      return datedif + timedif;
    },
    datedifference(sDate1, sDate2) { // sDate1和sDate2是2006-12-18格式
      let dateSpan;
      let iDays;
      sDate1 = Date.parse(sDate1);
      sDate2 = Date.parse(sDate2);
      dateSpan = sDate2 - sDate1;
      dateSpan = Math.abs(dateSpan);
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
      return iDays;
    },
    addtime() {
      const a = {
        starttime: '',
        endtime: '',
        startinterval: '',
        endinterval: '',
        timelen: '',
      };
      this.timearr.push(a);
    },
    deletetime(index) {
      this.timearr.splice(index, 1);
    },
  },
};
</script>
<style>
  .deleteicon{
    display: inline-block;
    width: 100%;
    height: 78px;
    /* background: red; */
    font-size: 20px;
    /* margin: 0 auto; */
    text-align: center;
    line-height: 77px;
    color: #aaa;
    cursor: pointer;
  }
</style>
